<template>
    <div class="purchasDetils" v-if="isDetails == false">
        <a-card :bordered="false" class="mt-20">
            <div class="w-100 d-flex">
                <div class="cardItem d-flex">
                    <label class="title">采购项名称：</label>
                    <a-input placeholder="请输入名称"></a-input>
                </div>
                <div class="cardItem d-flex">
                    <label class="title">采购项来源:</label>
                    <a-input placeholder="请输入采购来源"></a-input>
                </div>
                <div class="btns">
                    <a-button type="primary">查询</a-button>
                    <a-button class="ml-10">重置</a-button>
                </div>
            </div>
        </a-card>
        <a-card :bordered="false" class="mt-20">
            <div class="actionBox">
                <a-button type="primary">
                    <template #icon><plus-outlined /></template>
                    新增采购单列表
                </a-button>
                <a-button class="ml-10">
                    <template #icon><delete-outlined /></template>
                    批量删除
                </a-button>
                <a-button class="ml-10" type="dashed">
                    <template #icon><delivered-procedure-outlined /></template>
                    导出
                </a-button>
            </div>
            <a-table :data-source="purchasingSource" :columns="columns" class="mt-10">
                <template #bodyCell="{ column, record  }">
                    <template v-if="column.key === 'action'">
                        <a @click="showDetails(record.name, record.supplier, record.upDate, record.status)">详情</a>
                        <a-divider type="vertical" />
                        <a>编辑</a>
                        <a-divider type="vertical" />
                        <a>删除</a>
                    </template>
                </template>
            </a-table>
        </a-card>
    </div>
    <PurchasingDetails v-else :detailsInfo="detailsInfo" />
</template>

<script>
const columns = [{
    title: '采购项名称',
    dataIndex: 'name',
    key: 'name'
},{
    title: '供应商',
    dataIndex: 'supplier',
    key: 'supplier'
},{
    title: '计划到货日期',
    dataIndex: 'upDate',
    key: 'upDate'
},{
    title: '备注说明',
    dataIndex: 'mark',
    key: 'mark'
},{
    title: '已付金额',
    dataIndex: 'amount',
    key: 'amount'
}, {
    title: '总金额',
    dataIndex: 'amountPaid',
    key: 'amountPaid'
}, {
    title: '采购单状态',
    dataIndex: 'status',
    key: 'status'
}, {
    title: '物流',
    dataIndex: 'transport',
    key: 'transport'
}, {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
}]
import { defineComponent } from '@vue/composition-api'
import { purchasingList } from '@/api/purchasing/index.js'
import { reactive, ref } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import PurchasingDetails from './purchasingDetails'

export default defineComponent({
    components: {
        PurchasingDetails
    },
    setup() {
        onMounted(() => {
            getPurchasingList()
        })
        let detailsInfo = ref({})
        let isDetails = ref(false)
        const purchasingSource = reactive([])
        const getPurchasingList = () => {
            purchasingList().then(res => {
                res.data.result.forEach(el => {
                    purchasingSource.push(el)
                })
            })
        }
        const showDetails = (name, supplier, upDate, status ) => {
            isDetails.value = true
            detailsInfo.value = { 'name': name, 'supplier': supplier, 'upDate': upDate, 'status': status }
        }
        return {
            columns,
            isDetails,
            detailsInfo,
            showDetails,
            purchasingSource
        }
    },
})
</script>

<style lang="scss" scoped>
.cardItem {
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.title {
    width: 130px;
}
.actionBox {
    margin-bottom: 20px;
}
</style>
